<template>
	<view>
		<view class="topbg">
			
		</view>
		<view class="content margin-bottom">
			<view class="margin-sm panel top-50">
				<!-- <view>当前省市 {{ city.now_city }} 最低社保缴费标准</view> -->
				<!-- 一般用法 以工资收入计算年实得收入-->
				<view class="collapse-title">以薪金方式计算年实得收入（测算结果只做参考）</view>
				<uni-collapse class="margin-top-xs" >
				    <uni-collapse-item title="实得收入合计" :subTitle="resultList.wages_real">
						<view class="cu-list menu">
							<view class="cu-item " v-for="(item,index) in resultList.wages" :key="index">
								<view class="content">
									<text class="">{{item.name}}</text>
								</view>
								<view class="action"><text class=" text-sm">{{item.value}}</text></view>
							</view>
						</view>
				    </uni-collapse-item>
				   
				</uni-collapse>
				
			</view>
			<view class="margin-sm panel">
				<view class="collapse-title">以个人经营计算年实得收入（测算结果只做参考）</view>
				<uni-collapse class="margin-top-xs" >
				    <uni-collapse-item title="实得收入合计" :subTitle="resultList.management_real">
						<view class="cu-list menu">
							<view class="cu-item " v-for="(item,index) in resultList.management" :key="index">
								<view class="content">
									<text class="">{{item.name}}</text>
								</view>
								<view class="action"><text class=" text-sm">{{item.value}}</text></view>
							</view>
						</view>
				    </uni-collapse-item>
				   
				</uni-collapse>
			</view>
			<view class="margin-sm panel result-list">
				
				<view class="cu-item ">
					<view class="content">
						<text class="">以个人经营所得比以工资计算收入高（只做参考）：</text>
						<view class="result">{{resultList.management_real-resultList.wages_real}}元</view>
					</view>
					<view class="action"><text class=" text-sm">{{resultList.personal_different}}</text></view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	
	export default {
	    components: {uniCollapse,uniCollapseItem},
		data() {
			return {
				resultList:[],
				type:0,
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		onLoad() {
			this.getResult();
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			async getResult(){
				let param = uni.getStorageSync('taxParam') ;
				// let data = await this.$http.post('fiveRisks',{city:'重庆市',wages_before:'10000',wages_real:'6000'});
				let data = await this.$http.post(
					'tax', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				this.resultList = data;
				console.log(data);
			},
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100Vh;
		width: 100vw;
		background: #FFF;
		
		
	}
	.topbg{
		height: 100px;
		widows: 100%;
		background-color: #F6F6F6 !important;
	}
	.top-50{
		margin-top:-80px;
	}
	.collapse-title{
		font-size: 12px;
		color: #4CA5FE;
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 0;
		
	}
	.cu-list.menu>.cu-item {
		height: 48px;
		background-color: transparent !important;
		color: rgba(22, 118, 214, 0.62);
	}
	.border-top{
		border-top: 1rpx solid gray;
	}
	.line{
		border-top: 2rpx solid lightgray;
	}
	.result-list{
		background: #FE4C4C !important;
		box-shadow: 0px 3px 6px rgba(142, 228, 255, 0.12);
		opacity: 0.8;
		margin-top: 40px;
		.result{
			text-align: center;
			font-size: 20px;
		}
		.content{
			margin-top: 10px;
		}
	}
	.result-list>.cu-item {
		color: #FFFFFF !important;
		height: 65px;
	}
	
	.cu-list{
		background: rgba(113, 191, 251, 0.08);
		border-radius: 10px;
	}
	.my-uni-collapse-text{
		color: #4CA5FE;
		font-size: 12px;
	}
	
	.panel{
		background: #FFF;
		padding: 5px 10px;
		border-radius: 6px;
	}
	.page.show {
		overflow: hidden;
	}
	.bottom-img{
		position: fixed;
		bottom: 0;
		height: 100px;
		width: 100%;
	}
	.bg{
		width: 100%;
	}
	.margin-bottom{
		margin-bottom: 120px;
	}
	.result{
		height: 48px;
		line-height: 48px;
		font-size: 16px;
	}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
